<script setup lang="ts">
const props = defineProps<{
    modelValue: boolean
}>();

const emits = defineEmits<{
    (eventName: "update:modelValue", flag: boolean): void
}>();

const change=()=>{
    emits("update:modelValue",!props.modelValue)
}

</script>

<template>
    <div class="login-head">
        <h3>{{ modelValue ? "验证码登录" : "密码登录"}}</h3>
        <a @click="change">
            <span>{{ modelValue ? "密码登录" : "验证码登录"}}</span>
            <van-icon name="arrow"></van-icon>
        </a>
    </div>
</template>

<style scoped lang="scss">
.login-head {
    display: flex;
    padding: 30px 30px 10px;
    justify-content: space-between;
    align-items: flex-end;
    line-height: 1;

    h3 {
        font-weight: normal;
        font-size: 22px;
        color: var(--cp-primary);
    }

    a {
        font-size: 15px;
        color: var(--cp-primary);
    }
}
</style>
